<template>
  <!-- 表1 毕业生去向分布情况 表格改扇形 按钮区分本科硕博总体 -->
  <div class="chart-box">
    <div
      id="chart-1"
      style="min-width: 300px; height: 400px; margin: 0 auto"
    ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  created() {
    this.axios({
      url: "grad/yearList",
      methods: "get",
    }).then((res) => {
      let years = res.data.data;

      years = years.sort(function (a, b) {
        return a - b;
      });

      //默认为最近一年
      this.start = years[years.length - 1];
      this.end = years[years.length - 1];

      this.initData();
    });
  },
  data() {
    return {
      data: [],
      data2: [],
      start: null,
      end: null,
      chart: null,
    };
  },
  mounted() {
    // this.chart = echarts.init(document.getElementById('chart-1'))
    // window.addEventListener('resize', () => {
    //   if (this.chart) {
    //     setTimeout(() => {
    //       this.chart.resize()
    //     }, 10)
    //   }
    // })
  },
  computed: {
    // myChart() {
    //   return echarts.init(document.getElementById('chart-1'));
    // }
  },
  methods: {
    count_kind(data) {
      let job_onwork = 0; //签就业协议
      let bound_study = 0; //境内升学
      let aborad = 0; //出国出境
      let flexible = 0; //灵活就业
      let nl = 0;
      let sum = 0;
      for (let i in data) {
        let cur = data[i]["term"];
        let num = data[i]["num"];
        if (cur == "签就业协议形式就业") {
          job_onwork += num;
        } else if (cur == "签劳动合同形式就业") {
          job_onwork += num;
        } else if (cur == "出国、出境") {
          aborad += num;
        } else if (cur == "境内升学") {
          bound_study += num;
        } else if (cur == null) {
          nl += num;
        } else {
          flexible += num;
        }
        sum += num;
      }
      let study = bound_study + aborad;
      let job = job_onwork + flexible;
      // return [sum, study, job, nl, bound_study, job_onwork, aborad, flexible];
      return [sum, study, job, nl, bound_study, job_onwork, aborad, flexible];
    },
    initData() {
      this.axios({
        url: "grad/direction",
        method: "get",
        params: {
          start: this.start,
          end: this.end,
        },
      })
        .then((res) => {
          // console.log(res.data.data);
          let bachelor = this.count_kind(res.data.data.bachelor);
          let master = this.count_kind(res.data.data.master);
          let res_bach = [];
          let res_mas = [];
          for (let i = 1; i < 4; i++) {
            res_bach.push(((bachelor[i] / bachelor[0]) * 100).toFixed(2));
            res_mas.push(((master[i] / master[0]) * 100).toFixed(2));
          }
          // console.log(res_mas)
          this.data = res_bach;
          this.data2 = res_mas;
          this.drawChart();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    drawChart() {
      // this.myChart = echarts.init(document.getElementById('chart-1'));
      let that = this;
      echarts.init(document.getElementById("chart-1")).dispose();
      this.myChart = echarts.init(document.getElementById("chart-1"));
      this.myChart.setOption({
        title: {
          text: this.start + "届毕业去向分布情况",
          x: "center",
        },
        tooltip: {},
        legend: {
          bottom: "bottom",
          data: ["本科生", "研究生"],
        },
        radar: {
          // shape: 'circle',
          name: {
            textStyle: {
              color: "#fff",
              backgroundColor: "#999",
              borderRadius: 3,
              padding: [3, 5],
            },
          },
          indicator: [
            { name: "升学", max: 100 },
            { name: "就业", max: 100 },
            { name: "未就业", max: 100 },
            // { name: '国内', max: 100 },
            // { name: "协议和合同就业", max: 100 },
            // { name: '出国（出境）', max: 100 },
            // { name: "灵活就业", max: 100 }
          ],
        },
        series: [
          {
            name: "本科生 vs 研究生",
            type: "radar",
            data: [
              {
                value: that.data,
                name: "本科生",
              },
              {
                value: that.data2,
                name: "研究生",
              },
            ],
          },
        ],
      });
    },
    resize() {
      this.myChart.resize();
    },
  },
};
</script>

<style scoped>
.chart-box {
  width: 100%;
  height: 100%;
  padding: 10px;
  margin: 0 auto;
  margin-bottom: 10px;
  margin-top: 10px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
}

.chart-box :hover {
  cursor: pointer;
}
</style>
